<template>
	<view>
		<template>
			<view class="vip-header">
				<custom title="合伙人中心" background="rgba(0,0,0,0)" titleColor="#FFFFFF" backColor="#FFFFFF"></custom>
				
				
				
				
				
				<scroll-view @touchstart="swiperScrollTouchStart" @scroll-x="true" style="margin-top: 40rpx;"
					@scroll="swiperScroll" :scroll-into-view="swiper_id" :scroll-with-animation="true">
					<view style="width: auto;white-space: nowrap;">
						<!-- 开启合伙人尊享进阶权益 -->
						<view class="swiper-item-vip " id="scroll-svip">
							<view
								style="height: 100%;background: url(../../static/vip/svip.png) left top / 100% 100% no-repeat;padding-left: 44rpx;padding-top: 50rpx;">

								<view class="flex flex-y-center">
									<image src="../../static/my/svip-icon.png" style="width: 80rpx;height: 52rpx;">
									</image>
									<view class="ml-20">
										<view class="bold fs-40"
											style="line-height: 44rpx;color: #FFDBAE;font-style: italic;">
											发个信 合伙人
										</view>
										<view class="mt-10  fs-26" style="color: #A58F74;">

											{{user_info.partnerEndTime >= vipNowTime ? '您已是合伙人尊享进阶权益':'开启合伙人尊享进阶权益'}}
										</view>
									</view>
								</view>

								<view class=" fs-24" style="margin-top: 66rpx;color: #A58F74;">
									{{user_info.partnerEndTime >= vipNowTime ? get_end_time(user_info.partnerEndTime):'未加入合伙人'}}
								</view>
							</view>
						</view>
						<view style="width: 26rpx;display: inline-block;"></view>
					</view>
				</scroll-view>




				<view style="height: 80rpx;"></view>
			</view>


			<view class="vip-content">



				<view class="flex flex-y-center">
					<view class="v-line-vip">

					</view>
					<view class="color-333333 fs-30 ml-10">
						合伙人特权
					</view>
				</view>


				<!-- 合伙人特权 -->
				<view class="flex flex-wrap  bg-FFFFFF mt-30"
					style="padding: 20rpx 0rpx 40rpx 24rpx;border-radius: 20rpx;">
					<view v-for="(item,index) in powers" :key="index" class="vip-power-box">
						<image :src="item.url"></image>
						<view class="vip-power-text over-line1 flex-1">
							<view>{{item.text[swiper_index]}}{{item.unit || ''}}</view>
							<view>{{item.name}}</view>
						</view>
					</view>
				</view>





				<view class="fs-24 mt-20 color-999999">
					<view>本产品是虚拟产品，购买后不能退款！</view>
					<view>最终解释权归发个信APP所有。</view>
				</view>
			</view>






			<view class="footer pl-40 flex flex-y-c">
				<view class="left">
					{{ (!is_ios_copy?vip[swiper_index].amt:vip[swiper_index].appleAmt) + '元/' }}{{vip[swiper_index].time>300?'年':'月'}}
				</view>
				<view class="right flex flex-x-y" @tap="toPay">
					<text>
						{{user_info.partnerEndTime >= vipNowTime ? '立即续费':'立即购买'}}
					</text>
				</view>
			</view>
			<paylist ref="payList"></paylist>
		</template>
	</view>
</template>

<script>
	import vipApi from './api/vip'
	import {
		payByliveId
	} from '@/utils/pay.js';
	export default {
		data() {
			return {
				vip: [],
				powers: [{
						url: '../../static/vip/s1.png',
						name: '好友上限',
						text: ['', ''],
						unit: '人',
					},
					{
						url: '../../static/vip/s2.png',
						name: '群成员上限',
						text: ['', ''],
						unit: '人',
					},
					{
						url: '../../static/vip/s3.png',
						name: '创建群聊',
						text: ['', ''],
						unit: '个',
					},
				],
				vipNowTime: 1000,
				scrollTop: 0, //左滑的位置
				scrollItemWidth: 0,
				swiper_id: '',
			}
		},
		computed: {
			swiper_index() {
				return 2;
			}
		},
		onLoad(e) {
			this.scrollItemWidth = uni.upx2px(300);
			console.log('this.scrollItemWidth', this.scrollItemWidth);
			this.is_ios_copy = this.is_ios;
			// this.is_ios_copy = false;

			if (e.type && e.type == 'svip') {
				this.scrollTop = 400;
				this.show_svip = true;
			}
		},
		onShow() {
			this.vipNowTime = new Date().getTime();
			this.getInfo();
		},
		methods: {
			async toPay() {
				this.$refs.payList.open({
					price: !this.is_ios_copy ? this.vip[this.swiper_index].amt : this.vip[this.swiper_index]
						.appleAmt,
					success: (id, price, detail) => {
						/////////
						this.less(() => {
							payByliveId({
								id: this.vip[this.swiper_index].id,
								pay: detail,
								price: price,
								vipType: !this.is_ios_copy ? '' : 'apple',
								success: () => {
									this.showToast('支付成功！')
									// this.close()
									this.getInfo()
									this.$store.dispatch('refresh_user');
								},
								fail: () => {
									this.showToast('支付失败！')
									// this.close()
								}
							}, 'vip');
						});
						////////
					}
				});
				//选择支付方式
				return;


				const {
					status,
					data
				} = await vipApi.buyVip({
					id: this.vip[this.swiper_index].id
				})
				if (status === 200) {
					this.placeOrder(data.id)
				}

			},
			async placeOrder(orderId) {
				const {
					data,
					status
				} = await vipApi.placeOrder({
					orderId
				})
				if (status !== 200) return
				uni.requestPayment({
					provider: 'alipay',
					orderInfo: data,
					success: () => {
						this.showToast('支付成功！')
						this.close()
						this.getInfo()
						this.$store.dispatch('refresh_user');
					},
					fail: () => {
						this.showToast('支付失败！')
						this.close()
					},
				})
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			async getInfo() {
				let {
					data
				} = await vipApi.getVipInfo()
				data = this.clone(data).filter(val => val.amt);
				data = data.sort((v1, v2) => {
					return v1.level > v2.level ? 1 : -1;
				});
				data.forEach((val, index) => {
					this.powers[0].text[index] = val.friendMax;
					this.powers[1].text[index] = val.groupPeopleMax;
					this.powers[2].text[index] = val.groupMax;
				});
				this.vip = data;
				console.log('返回的数据',this.vip)
				if (this.show_svip) {
					this.$nextTick(() => {
						this.swiper_id = 'scroll-svip';
						this.show_svip = false;
					});
				}



			},
			swiper_change(e) {
				this.swiper_index = e.detail.current;
			},
			get_end_time(times) {
				console.log('!!!',times)
				return `有效期至 : ${this.dateFormat('YY-mm-dd',new Date(times))}`;
			},
			swiperScroll(e) {
				this.scrollTop = e.detail.scrollLeft;
				clearTimeout(this.scrollTimer);
				this.scrollTimer = setTimeout(() => {
					this.swiperScrollTouchEnd();
				}, 100);
			},

			swiperScrollTouchStart() {
				clearTimeout(this.scrollTimer);
			},
			swiperScrollTouchEnd() {
				this.swiper_id = '';
				this.$nextTick(() => {


					if (this.swiper_index == 0) {
						this.swiper_id = 'scroll-vip';
					} else {
						this.swiper_id = 'scroll-svip';
					}

				});
				// console.log('this.swiper_id', this.swiper_id);
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: $pageColor;
		font-size: 28rpx;
	}


	.vip-header {
		background: url(../../static/vip/box.png) left top / 100% 100% no-repeat;
		position: relative;
		z-index: 2;
	}

	.vip-content {
		position: relative;
		z-index: 10;
		background-color: $pageColor;
		border-radius: 30rpx;
		margin-top: -40rpx;
		padding: 30rpx 30rpx;
	}

	.swiper-item-vip {
		width: 750rpx;
		height: 280rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: inline-block;
	}

	.v-line-vip {
		width: 8rpx;
		height: 28rpx;
		background: linear-gradient(0deg, #F09675 0%, #FEE2DB 100%);
		border-radius: 4rpx;
	}

	.vip-power-box {
		width: 204rpx;
		border-radius: 10rpx;
		height: 128rpx;
		background: linear-gradient(-57deg, #FCEDE4 0%, #FDF7F5 100%);
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		margin-top: 20rpx;
		margin-right: 20rpx;

		&:nth-of-type(3n) {
			margin-right: 0;
		}

		image {
			width: 46rpx;
			height: 46rpx;
			margin-left: 19rpx;
			margin-right: 14rpx;
		}
	}

	.vip-power-text>view:nth-of-type(1) {
		font-size: 30rpx;
		color: #551300;
	}

	.vip-power-text>view:nth-of-type(2) {
		font-size: 22rpx;
		color: #B3907D;
	}

	.footer {
		margin: 0 30rpx;
		width: 690rpx;
		height: 90rpx;
		border-radius: 80rpx;
		background: #3F454F;
		position: fixed;
		left: 0;
		bottom: 60rpx;
		color: #FFFFFF;
		font-size: 28rpx;

		.right {
			background: #FD7747;
			height: 100%;
			border-radius: 70rpx;
			position: absolute;
			right: 0;
			top: 0;
			padding: 18rpx 90rpx;
		}
	}

	.conent-box {
		background-color: $pageColor;
		border-radius: 20rpx;
		position: relative;
		margin-top: -80rpx;
		padding-top: 20rpx;
		z-index: 22;
	}




	.dialog {
		width: 100%;
		background: #fff;
		height: 330rpx;

		.title {
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
			padding: 5rpx 0;
		}

		.iconfont {
			font-size: 40rpx;
			color: #F4944E;
			vertical-align: middle;
			margin-right: 20rpx;
		}

		.zhifubao {
			height: 100rpx;
			line-height: 100rpx;

			.iconfont {
				font-size: 60rpx;
				color: #009FE8;
				vertical-align: middle;
			}
		}

		.btn {
			height: 80rpx;
			width: 600rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			background: #F4944E;
			margin: 0 auto;
			border-radius: 80rpx;
		}

	}
</style>